import { useAddArticle, useGetAllQuestion } from '@/services/article';
import {
  EyeOutlined,
  FieldTimeOutlined,
  LikeOutlined,
  MessageOutlined,
  StarOutlined,
  UserOutlined,
} from '@ant-design/icons';
import {
  ProCard,
  ProForm,
  ProFormTextArea,
  ProList,
} from '@ant-design/pro-components';
import { history, useModel } from '@umijs/max';
import { Button, Form, Layout, Popconfirm, Space, Tag } from 'antd';
import { Content } from 'antd/es/layout/layout';
import Sider from 'antd/es/layout/Sider';
import { useMemo } from 'react';
import dayjs from 'dayjs';
import { IconText } from '../dashboard/my-articles';
import { OverflowHiddenText } from '../dashboard/my-articles/style';
import React from 'react';

const contentStyle: React.CSSProperties = {
  textAlign: 'center',
  minHeight: 120,
  lineHeight: '120px',
  color: '#fff',
  minWidth: '700px',
};

const siderStyle: React.CSSProperties = {
  textAlign: 'center',
  color: '#fff',
  backgroundColor: 'transparent',
  marginLeft: '20px',
};

interface BriefArticleForm {
  title: string;
  introduction: string;
}

const Question: React.FC = () => {
  const { initialState } = useModel('@@initialState');
  const [questionForm] = Form.useForm<BriefArticleForm>();
  const { data: source } = useGetAllQuestion();
  const { mutateAsync: addArticle } = useAddArticle(initialState?.id ?? -1, 1);

  const handlerFinish = async (e: BriefArticleForm) => {
    if (initialState?.id && initialState.id > -1) {
      const res = await addArticle({
        ...e,
        articleSource: 0,
        isQuestion: 1,
        time: dayjs().format('YYYY-MM-DD hh:mm:ss'),
      });
      if (res?.code === 200) questionForm.resetFields();
    }
  };

  const dataSource = useMemo(() => {
    return (
      source?.data &&
      source.data.map((item: API.IArticles) => ({
        ...item,
        title: <OverflowHiddenText row={1}>{item.title}</OverflowHiddenText>,
      }))
    );
  }, [source]);

  return (
    <>
      <Layout>
        <Content style={contentStyle}>
          <ProList<any>
            onRow={(record: any) => {
              return {
                onClick: () => {
                  history.push(`/article?id=${record.id}`);
                },
              };
            }}
            rowKey="id"
            headerTitle="最近提问"
            dataSource={dataSource}
            metas={{
              title: {},
              subTitle: {},
              actions: {
                render: (_, record) => [
                  <Tag
                    color={record.isDone === 1 ? '#5BD8A6' : 'red'}
                    key="status"
                  >
                    {record.isDone === 1 ? '已解决' : '未解决'}
                  </Tag>,
                  <IconText
                    icon={UserOutlined}
                    text={record.nickName}
                    key="user"
                  />,
                  <IconText
                    icon={FieldTimeOutlined}
                    text={record.time.substring(0, 10)}
                    key="time"
                  />,
                  <IconText
                    icon={EyeOutlined}
                    text={record.lookNum ?? 0}
                    key="list-vertical-eye"
                  />,
                  <IconText
                    icon={StarOutlined}
                    text={record.starNum ?? 0}
                    key="list-vertical-star"
                  />,
                  <IconText
                    icon={LikeOutlined}
                    text={record.likeNum ?? 0}
                    key="list-vertical-like"
                  />,
                  <IconText
                    icon={MessageOutlined}
                    text={record.commentNum ?? 0}
                    key="list-vertical-message"
                  />,
                ],
              },
            }}
          />
        </Content>
        <Sider style={siderStyle} width={400}>
          <ProCard title="快速提问" tooltip="这是提示">
            <Space style={{ width: '100%' }} direction="vertical">
              <Popconfirm
                title="提问前请先登录哦~~"
                onConfirm={() => history.push('/login')}
                okText="去登录"
                cancelText="放弃提问"
                disabled={!!(initialState?.id && initialState.id > -1)}
              >
                <ProForm<BriefArticleForm>
                  form={questionForm}
                  onFinish={async (e) => handlerFinish(e)}
                  submitter={{
                    searchConfig: { submitText: '提交', resetText: '重置' },
                  }}
                >
                  <ProFormTextArea name="title" label="标题" />
                  <ProFormTextArea
                    name="introduction"
                    label="详细内容"
                    fieldProps={{ rows: 15 }}
                  />
                </ProForm>
              </Popconfirm>
              <Button
                type="link"
                color="gray"
                onClick={() => history.push(`/dashboard/write?isQ=1`)}
              >
                想调字体和图片？来这
              </Button>
            </Space>
          </ProCard>
        </Sider>
      </Layout>
    </>
  );
};

export default Question;
